<template>
    <div class="cmt-container">
          <h3>发表评论</h3>
          <hr>
          <textarea maxlength="120" placeholder="请输入你要评论的内容，100字以内" v-model="msg"></textarea>

          <mt-button type="primary" size="large" @click="postComment">提交评论</mt-button>

          <div class="cmt-list">
              <div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
                    <div class="cmt-title">
                        {{ i+1 }}楼&nbsp;&nbsp;{{item.user_name}}&nbsp;&nbsp;&nbsp;&nbsp;发表时间：{{item.add_time | dataFormat('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                    <div class="cmt-body">
                         {{  item.content == 'undefined' || item.content ==''?'此用户没有评论.':item.content}}
                    </div>
              </div>

          </div>

          <mt-button type="danger"  size="large" @click="getMore" plain>加载更多</mt-button>
    </div>
</template>


<script>
import {Toast} from 'mint-ui'

export default {
     data(){
          return{
              id:this.$route.params.id,
              pageindex:1,
              comments:[],
              msg:""
          }
     },
     created(){
          this.getcomments()
     },
     methods:{
          getcomments(){
               this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(
                    result=>{
                         if(result.body.status == 0){  //请求成功
                              // this.comments = result.body.message
                              // 加载更多的功能  需要把老的数据和新数据进行合并  不能直接覆盖
                              this.comments  = this.comments.concat(result.body.message)
                         }
                         else{  //请求失败
                               Toast('获取评论数据失败..')
                         }
                    }
               )
          },
          getMore(){
            this.pageindex ++;
            this.getcomments()
          },
          postComment(){
               if(this.msg.trim().length ==0){  //判断用户是否输入评论
                return Toast("评论不能为空！请输入评论..")
               }

               this.$http.post('api/postcomment/'+this.id,{ content:this.msg }).then(
                    result =>{
                         if(result.body.status ==0){
                                Toast("发表成功！")
                                var cmt = {
                                     user_name:"匿名用户",
                                     add_time:Date.now(),
                                     content:this.msg
                                }
                                this.comments.unshift(cmt)
                                this.getcomments()
                                this.msg =""  
                         }
                         else{
                                 Toast("发表评论失败！请重新尝试")
                         }
                    }
               )
          }
          // props:['id']
     }
}
</script>

<style>
.cmt-container{
    margin:0 0;
}

.cmt-container h3{
    font-size: 18px;
}

.cmt-container textarea{
   height: 85px;
   font-size: 14px;
   margin: 0;
}

.cmt-list .cmt-item .cmt-body{
     line-height: 35px;
     font-size: 14px;
     text-indent:2em;
}

.cmt-list{
    margin:5px 0;
}

.cmt-list .cmt-item  .cmt-title{
    line-height: 35px;
    font-size: 13px;
    background-color: #ccc;
}


</style>